<template>
  <div id="profile">
    <nav-bar>
      <template #left>
        <van-icon name="arrow-left" @click="$router.go(-1)" />
      </template>
      <template #center> 我的</template>
      <template #right> <span>•••</span> </template>
    </nav-bar>
    <my-content>
      <user-filter :currentUser="currentUser">
        <div>
          <user-card
            type="edit"
            :name="currentUser.name"
            :tel="currentUser.tel"
            :intro="currentUser.intro"
            @click="onEdit"
          />
          <ul class="user-list">
            <li class="van-hairline--bottom">
              <span>我的订单</span><i class="van-icon van-icon-arrow"></i>
            </li>
            <li class="van-hairline--bottom">
              <span>账号管理</span><i class="van-icon van-icon-arrow"></i>
            </li>
            <li class="van-hairline--bottom">
              <span>地址管理</span><i class="van-icon van-icon-arrow"></i>
            </li>
            <li class="van-hairline--bottom">
              <span>关于我们</span><i class="van-icon van-icon-arrow"></i>
            </li>
            <li>
              <van-button
                round
                type="primary"
                color="#ff8198"
                style="width: 100%"
                @click="onLogout"
                >退出登陆</van-button
              >
            </li>
          </ul>
          <van-popup v-model:show="show" position="top" round>
            <nav-bar style="position: static">
              <template #center> 个人信息编辑</template>
            </nav-bar>
            <van-form @submit="onSubmit">
              <van-field
                v-model="currentUser.name"
                name="name"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
              />
              <van-field
                v-model="currentUser.password"
                type="password"
                name="password"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
              />
              <van-field
                v-model="currentUser.tel"
                type="tel"
                name="tel"
                label="电话"
                placeholder="电话"
                :rules="[{ required: true, message: '请填写手机号' }]"
              />
              <van-field
                v-model="currentUser.intro"
                name="intro"
                label="介绍"
                placeholder="介绍"
                :rules="[{ required: true, message: '请填写个人介绍' }]"
              />
              <div style="margin: 16px">
                <van-button round block type="primary" native-type="submit">
                  保存
                </van-button>
              </div>
            </van-form>
          </van-popup>
        </div>
      </user-filter>
    </my-content>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar.vue";
import MyContent from "@/components/common/content/Content.vue";
import UserCard from "@/components/content/profile/usercard/UserCard.vue";
import UserFilter from "@/components/content/filter/UserFilter.vue";
import { Dialog } from "vant";

export default {
  name: "Profile",
  components: {
    NavBar,
    MyContent,
    UserCard,
    UserFilter,
  },
  data() {
    return {
      show: false,
      currentUser: {},
    };
  },
  created() {
    let currentUser = JSON.parse(sessionStorage.getItem("currentUser"));

    if (currentUser) {
      this.currentUser = currentUser;
    } else {
      this.currentUser = {};
    }
  },
  methods: {
    onEdit() {
      this.show = true;
    },
    onSubmit(value) {
      sessionStorage.setItem("currentUser", JSON.stringify(value));
    },
    onLogout() {
      Dialog.confirm({
        title: "退出登陆",
        message: "确定退出登陆？",
      })
        .then(() => {
          //将session转移到local
          let userList = JSON.parse(localStorage.getItem("userList"));
          userList.map((item, index) => {
            if (item.goodsId === this.currentUser.goodsId) {
              userList[index] = this.currentUser;
            }
          });
          localStorage.setItem("userList", JSON.stringify(userList));
          //删除session
          sessionStorage.removeItem("currentUser");
          this.$router.push("/home");
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped>
#profile {
  overflow: hidden;
}
.user-list {
  padding: 10px;
}
.user-list span {
  display: inline-block;
  width: 90%;
}
.user-list li {
  margin: 5px;
  padding: 5px 0;
}
</style>
